<template>
  <div>
    <Pannel>
      <template v-slot:title>
        <h4>三剑客</h4>
      </template>
      <template v-slot:content>
        <img src="./assets/表情包.png" alt="">
      <span>我是文字哦</span>
      </template>
    </Pannel>
    <!-- 
      具名插槽的使用
      什么是具名插槽：具有name属性的slot插槽，就叫具名插槽
      使用步骤：
        1、在封装的组件中，slot使用name属性区分不同插槽
        2、在父组件使用的时候，template标签配置v-slot:名字(slot插槽name属性的值)，
        那么渲染的时候就能够根据名字来分发对应的内容了
     -->
  </div>
</template>

<script>
import Pannel from "./components/Pannel.vue"
export default {
  components: {
    Pannel
  }
}
</script>

<style>

</style>